<template>
	<view class="shopType">
		<navBar isBack backColor="#333" title="商品属性" color="#333" background="#fff"></navBar>
		<view class="box">
			<view class="item" :class="{'active':type1}">
				推荐商品
				<u-switch size="40" @change="openType1" active-color="#E3BA71" v-model="type1"></u-switch>
			</view>
			<view class="item" :class="{'active':type2}">
				新品上市
				<u-switch size="40" @change="openType2" active-color="#E3BA71" v-model="type2"></u-switch>
			</view>
			<view class="item" :class="{'active':type3}">
				热卖商品
				<u-switch size="40" @change="openType3" active-color="#E3BA71" v-model="type3"></u-switch>
			</view>
			<view class="item" :class="{'active':type4}" style="border: 0;">
				包邮商品
				<u-switch size="40" @change="openType4" active-color="#E3BA71" v-model="type4"></u-switch>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="toSubmit">确定</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type1:false,
				type2:false,
				type3:false,
				type4:false,
			}
		},
		onLoad(options) {
			let type = options.type
			let arr = type.split(',')
			console.log(arr,'type')
			this.type1 = arr.findIndex(item=>item==1)==-1?false:true
			this.type2 = arr.findIndex(item=>item==2)==-1?false:true
			this.type3 = arr.findIndex(item=>item==3)==-1?false:true
			this.type4 = arr.findIndex(item=>item==4)==-1?false:true
		},
		methods:{
			openType1(e){
				console.log(e,'eee')
			},
			openType2(e){
				
			},
			openType3(e){
				
			},
			openType4(e){
				
			},
			// 确定
			toSubmit(){
				let arr = []
				if(this.type1){
					arr.push('1')
				}
				if(this.type2){
					arr.push('2')
				}
				if(this.type3){
					arr.push('3')
				}
				if(this.type4){
					arr.push('4')
				}
				console.log(arr,'确定')
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				console.log(pages)
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				console.log(prevPage)
				prevPage.$vm.shopTypeList = arr;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.shopType{
		.box{
			width: 702rpx;
			padding: 8rpx 28rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin: 24rpx auto;
			.item{
				padding: 32rpx 0 ;
				display: flex;
				border-bottom: 2rpx solid #F5F5F5;
				justify-content: space-between;
				align-items: center;
				color: #A0A0A0;
				font: 400 26rpx/40rpx PingFang SC;
			}
			.active{
				color: #333;
			}
		}
		.btn{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			height: calc(120rpx+ constant(safe-area-inset-bottom));
			height: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			button{
				width: 606rpx;
				height: 80rpx;
				border-radius: 46rpx;
				margin: 20rpx auto;
				background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 3px 6px rgba(219, 169, 84, 0.3);
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
				
			}
		}
	}
</style>
